<footer class="footer">
    <div class="footer-top py-4">
        <div class="container">
            <div class="row gy-4">
                <div class="col-lg-4 col-md-6">
                    <div class="footer-info">
                        <h3>UdemyClone</h3>
                        <p class="pb-3">
                            <em>Your premier platform for online learning and skill development.</em>
                        </p>
                        <div class="social-links mt-3">
                            <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
                            <a href="#" class="facebook"><i class="fab fa-facebook"></i></a>
                            <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>
                            <a href="#" class="linkedin"><i class="fab fa-linkedin"></i></a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-2 col-md-6">
                    <h4>Useful Links</h4>
                    <ul class="footer-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About us</a></li>
                        <li><a href="#">Courses</a></li>
                        <li><a href="#">Terms of service</a></li>
                        <li><a href="#">Privacy policy</a></li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-6">
                    <h4>Popular Categories</h4>
                    <ul class="footer-links">
                        <li><a href="#">Web Development</a></li>
                        <li><a href="#">Data Science</a></li>
                        <li><a href="#">Mobile Development</a></li>
                        <li><a href="#">Business</a></li>
                        <li><a href="#">Design</a></li>
                    </ul>
                </div>

                <div class="col-lg-3 col-md-6">
                    <h4>Contact Us</h4>
                    <p>
                        <strong>Email:</strong> info@example.com<br>
                        <strong>Phone:</strong> +1 5589 55488 55<br>
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="footer-bottom py-3">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="copyright">
                        &copy; <script>document.write(new Date().getFullYear())</script> <strong>UdemyClone</strong>. All Rights Reserved
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="credits text-md-end">
                        Designed with <i class="fas fa-heart text-danger"></i> for learning
                    </div>
                </div>
            </div>
        </div>
    </div>
</footer>

<style>
.footer {
    background: #f8f9fa;
    color: #444444;
    font-size: 14px;
    position: relative;
    width: 100%;
    bottom: 0;
}

.footer-top {
    background: #f9f9f9;
    border-top: 1px solid #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}

.footer h4 {
    font-size: 16px;
    font-weight: bold;
    color: #012970;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 12px;
}

.footer-links {
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
}

.footer-links li {
    padding: 8px 0;
}

.footer-links li:first-child {
    padding-top: 0;
}

.footer-links a {
    color: #013289;
    text-decoration: none;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #0d6efd;
    text-decoration: underline;
}

.social-links a {
    font-size: 18px;
    display: inline-block;
    background: #013289;
    color: white;
    line-height: 36px;
    margin-right: 10px;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
}

.social-links a:hover {
    background: #0d6efd;
    color: #fff;
    text-decoration: none;
}

.footer-bottom {
    background: #f1f1f1;
}

.copyright {
    color: #013289;
}

.credits {
    color: #013289;
}

/* Make footer stick to bottom when content is short */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

.footer {
    flex-shrink: 0;
}
</style>

<!-- Modal -->
<div class="modal fade" id="signInModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content sign-in-modal">
            <div class="modal-header">
                <h5 class="modal-title">Login to your account!</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="#" method="post">
                    {% csrf_token %}
                    <div class="input-group">
                        <span class="input-field-icon"><i class="fas fa-envelope"></i></span>
                        <input type="email" name="email" class="form-control" placeholder="email">
                    </div>
                    <div class="input-group">
                        <span class="input-field-icon"><i class="fas fa-lock"></i></span>
                        <input type="password" name="password" class="form-control" placeholder="password">
                    </div>
                    <button type="submit" class="btn btn-primary">Login</button>
                    <div class="forgot-pass">
                        <span>or</span>
                        <a href="" data-toggle="modal" data-target="#forgotModal" data-dismiss="modal">Forgot
                            password</a>
                    </div>
                </form>
                <div class="account-have">
                    Don't have an account? <a href="" data-toggle="modal" data-target="#signUpModal"
                                              data-dismiss="modal">Sign up</a>
                </div>
            </div>
        </div>
    </div>
</div><!-- Modal -->

<!-- Rating Modal -->
<div class="modal fade multi-step" id="EditRatingModal" tabindex="-1" role="dialog" aria-hidden="true"
     reset-on-close="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content edit-rating-modal">
            <div class="modal-header">
                <h5 class="modal-title step-1" data-step="1">Step 1</h5>
                <h5 class="modal-title step-2" data-step="2">Step 2</h5>
                <h5 class="m-progress-stats modal-title">
                    &nbsp;of&nbsp;<span class="m-progress-total"></span>
                </h5>

                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="m-progress-bar-wrapper">
                <div class="m-progress-bar">
                </div>
            </div>
            <form action="#" method="post">
                {% csrf_token %}
                <div class="modal-body step step-1">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="modal-rating-box">
                                    <h4 class="rating-title">How would you rate this course overall?</h4>
                                    <fieldset class="your-rating">

                                        <input type="radio" id="star5" name="rating" value="5"/>
                                        <label class="full" for="star5"></label>

                                        <input type="radio" id="star4" name="rating" value="4"/>
                                        <label class="full" for="star4"></label>

                                        <input type="radio" id="star3" name="rating" value="3"/>
                                        <label class="full" for="star3"></label>

                                        <input type="radio" id="star2" name="rating" value="2"/>
                                        <label class="full" for="star2"></label>

                                        <input type="radio" id="star1" name="rating" value="1"/>
                                        <label class="full" for="star1"></label>

                                    </fieldset>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="modal-course-preview-box">
                                    <div class="card">
                                        <img class="card-img-top img-fluid" id="course_thumbnail_1" alt="">
                                        <div class="card-body">
                                            <h5 class="card-title" class="course_title_for_rating"
                                                id="course_title_1"></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-body step step-2">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="modal-rating-comment-box">
                                    <h4 class="rating-title">Write a review</h4>
                                    <textarea id="review_of_a_course" name="review"
                                              placeholder="Describe your experience what you got out from this course"
                                              maxlength="1000" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="modal-course-preview-box">
                                    <div class="card">
                                        <img class="card-img-top img-fluid" id="course_thumbnail_2" alt="">
                                        <div class="card-body">
                                            <h5 class="card-title" class="course_title_for_rating"
                                                id="course_title_2"></h5>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" name="course_id" id="course_id_for_rating" value="">
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary next step step-1" data-step="1"
                            onclick="sendEvent(2)">Next
                    </button>
                    <button type="button" class="btn btn-primary previous step step-2 mr-auto" data-step="2"
                            onclick="sendEvent(1)">Previous
                    </button>
                    <button type="submit" class="btn btn-primary publish step step-2" id="">Publish</button>
                </div>
            </form>
        </div>
    </div>
</div><!-- Modal -->

<!-- Modal -->
<div class="modal fade" id="forgotModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content sign-in-modal">
            <div class="modal-header">
                <h5 class="modal-title">Forgot Password</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="" method="post">
                    <div class="input-group">
                        <input type="email" name="email" class="form-control forgot-email" placeholder="E-mail">
                    </div>
                    <div class="forgot-pass-btn">
                        <button type="submit" class="btn btn-primary d-inline-block">Reset Password</button>
                        <span>or</span>
                        <a href="" data-toggle="modal" data-target="#signInModal" data-dismiss="modal">Log In</a>
                    </div>
                </form>
                <div class="forgot-recaptcha">

                </div>
            </div>
        </div>
    </div>
</div><!-- Modal -->

<!-- Modal -->
<div class="modal fade" id="signUpModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content sign-in-modal">
            <div class="modal-header">
                <h5 class="modal-title">Sign Up And Start Learning!</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="#" method="post">
                    @csrf
                    <div class="input-group">
                        <span class="input-field-icon"><i class="fas fa-user"></i></span>
                        <input type="text" name="first_name" class="form-control"
                               placeholder="first name">
                    </div>
                    <div class="input-group">
                        <span class="input-field-icon"><i class="fas fa-user"></i></span>
                        <input type="text" name="last_name" class="form-control"
                               placeholder="last name">
                    </div>
                    <div class="input-group">
                        <span class="input-field-icon"><i class="fas fa-envelope"></i></span>
                        <input type="email" name="email" class="form-control"
                               placeholder="email">
                    </div>
                    <div class="input-group">
                        <span class="input-field-icon"><i class="fas fa-lock"></i></span>
                        <input type="password" name="password" class="form-control"
                               placeholder="password">
                    </div>
                    <div class="input-group">
                        <span class="input-field-icon"><i class="fas fa-lock"></i></span>
                        <input type="password" name="password_confirmation" class="form-control"
                               placeholder="Confirm password">
                    </div>
                    <div class="custom-control custom-checkbox deal-checkbox">
                        <input type="checkbox" class="custom-control-input" id="dealCheckbox">
                        <label class="custom-control-label" for="dealCheckbox">
                            Check Here For Exciting Deals And Personalized Course Recommendations
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">Sign up</button>
                </form>
                <div class="agreement-text">
                    By Signing Up You Agree To Our
                    <a href="">Terms of use</a> and <a
                        href="">Privacy Policy</a>.
                </div>
                <div class="account-have">
                    Already have an account?
                    <a href="" data-toggle="modal" data-target="#signInModal" data-dismiss="modal">Login</a>
                </div>
            </div>
        </div>
    </div>
</div><!-- Modal -->

<div class="modal fade" id="paymentModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content payment-in-modal">
            <div class="modal-header">
                <h5 class="modal-title">Checkout!</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <form action="#" method="get">
                            <input type="hidden" class="total_price_of_checking_out" name="total_price_of_checking_out"
                                   value="">
                            <button type="submit" class="btn btn-default paypal">
                                Paypal
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><!-- Modal -->